<template>
    <div>
        <h1>事件绑定指令</h1>
        <!-- 
            一、基础语法
            在vue中使用v-on指令完成事件绑定
            1.语法:v-on:事件类型="事件处理函数"
            2.简写语法: @事件类型="事件处理用函数" （推荐使用）
            3.methods选项的值是一个对象，该对象中可以定义1）自定义方法和2）事件处理函数
         -->
         <hr>
         <h2>计数器案例</h2>
         <h3>{{num}}</h3>
         <button v-on:click="num++" v-show="num<10">+</button>
         <button v-on:click="num--" v-show="num>0">-</button>
         <hr>
         <h2>小球变色</h2>
         <div class="box" :class="styleAry" @mouseover="styleAry.push('c1')" @mouseout="styleAry.pop()"></div>
         <hr>
         <h2>小球转动</h2>
         <div class="box c1" :class="styleAry"></div>
         <button @click="translateBox">移动</button>
         <button @click="roateBox()">转动</button>
         <button @click="scaleBox">缩放</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            num:1,
            styleAry:[]
        }
    },
    methods:{
        translateBox(){
            console.log('========开始移动了========');
            //如果要在methods的相关方法中获取到data中的数据，必须使用this才可以了
            this.styleAry.push('traslateBox')
        },
        roateBox(){
            console.log('========开始旋转了========');
            this.styleAry.push('rotateBox')
        },
        scaleBox(){
             console.log('========开始缩放了========');
             this.styleAry.push('scaleBox')

        }
    }
}
</script>

<style>
    .box{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border:1px solid #ccc;
    }
    .c1{
       background: linear-gradient(red,yellow); 
    }
    .traslateBox{
        transform: translate(100px,0);
    }
    .rotateBox{
        transform: rotate(180deg)
    }
    .scaleBox{
        transform: scale(1.5)
    }
</style>